<template>
    <div class="flexbox flexcolumn" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <ViewMember ref="viewRef" />
        <ExportDate ref="ex_ref" />
        <ExportTask ref="task_ref" />
        <SelectBrand ref="select_ref" />
        <div class="w_bg plam_box rd">
            <div class="flexbox flexcenter brand_head">
                <div class="brand_item flexbox flexcenter" @click="swichTab(item.id)" :class="{active:queryInfo.channel==item.id}" v-for="item in channelList" :key="item.id">
                    <svg class="fill_svg" width="20" height="20" viewBox="0 0 20 20" fill="#95A5C9" xmlns="http://www.w3.org/2000/svg" v-if="item.id==1">
                        <path d="M2 9.95511L5.55455 8.88486L9.46606 10.5795L6.35495 11.561L2 9.95511ZM6.44344 7.10145L9.99799 6.03221L13.9095 7.72685L10.7984 8.70834L6.44344 7.10145ZM10.5319 4.07025L14.0865 3L17.998 4.69465L14.8869 5.67613L10.5329 4.07025H10.5319ZM6.26546 17L9.46506 15.9308V10.5785L6.35495 11.56L6.26445 16.999L6.26546 17ZM10.7099 15.3941L13.9105 14.3239V7.72685L10.8004 8.70834L10.7099 15.3941ZM14.7994 13.9688L18 12.8986V4.69465L14.8889 5.67613L14.7984 13.9678L14.7994 13.9688Z" fill="inherit" />
                    </svg>
                    <svg class="fill_svg" width="20" height="20" viewBox="0 0 20 20" fill="#95A5C9" xmlns="http://www.w3.org/2000/svg" v-else-if="item.id==2">
                        <circle cx="14.4559" cy="9.62872" r="2.10919" fill="inherit" />
                        <circle cx="12.7797" cy="5.78377" r="1.84554" fill="inherit" />
                        <circle cx="12.7797" cy="13.503" r="1.84554" fill="inherit" />
                        <circle cx="10.1053" cy="3.67159" r="1.39157" fill="inherit" />
                        <circle cx="7.98146" cy="5.98134" r="0.951313" fill="inherit" />
                        <circle cx="9.80599" cy="13.4508" r="0.951313" fill="inherit" />
                        <circle opacity="0.5" cx="4.87632" cy="3.0626" r="0.876324" fill="inherit" />
                        <circle opacity="0.5" cx="8.03666" cy="16.7452" r="0.876324" fill="inherit" />
                        <circle cx="7.23328" cy="3.31824" r="1.31824" fill="inherit" />
                        <circle cx="10.2686" cy="15.8324" r="1.31824" fill="inherit" />
                        <circle opacity="0.5" cx="5.43223" cy="5.1533" r="1.12498" fill="inherit" />
                        <circle opacity="0.5" cx="7.72965" cy="14.6279" r="1.12498" fill="inherit" />
                    </svg>
                    <svg class="fill_svg" width="20" height="20" viewBox="0 0 20 20" fill="#95A5C9" xmlns="http://www.w3.org/2000/svg" v-else-if="item.id==3">
                        <path d="M8.97009 3.64844L9.95101 6.98358H2.12811L3.13356 3.64844H8.97009Z" fill="inherit" />
                        <path d="M3.91825 7.59668L7.27795 8.40594L3.37875 15.1744L1 12.6485L3.91825 7.59668Z" fill="inherit" />
                        <path d="M4.80109 13.948L7.17983 11.4221L11.1035 18.1905L7.71934 18.9998L4.80109 13.948Z" fill="inherit" />
                        <path d="M16.5723 16.327H10.7358L9.75482 13.0164H17.5777" fill="inherit" />
                        <path d="M18.7057 7.32707L15.7875 12.4034L12.4278 11.5941L16.327 4.82568" fill="inherit" />
                        <path d="M14.9046 6.05178L12.5258 8.57767L8.60211 1.78474L11.9863 1L14.9046 6.05178Z" fill="inherit" />
                    </svg>
                    <svg class="stroke_svg" width="20" height="20" viewBox="0 0 20 20" stroke="#95A5C9" fill="none" xmlns="http://www.w3.org/2000/svg" v-else-if="item.id==4">
                        <path d="M16.3016 3.34093C13.5192 3.08242 10.8116 9.42933 10.1406 10.6221C9.46955 11.8148 12.4893 15.5762 14.0612 16.2229C16.9042 17.3925 19.0839 3.59944 16.3016 3.34093Z" stroke="inherit" stroke-width="1.6" />
                        <path d="M3.78805 3.34093C6.57043 3.08242 9.27799 9.42933 9.94902 10.6221C10.6201 11.8148 7.60031 15.5762 6.0284 16.2229C3.18541 17.3925 1.00567 3.59944 3.78805 3.34093Z" stroke="inherit" stroke-width="1.6" />
                    </svg>
                    <svg class="fill_svg" width="20" height="20" viewBox="0 0 20 20" fill="#95A5C9" xmlns="http://www.w3.org/2000/svg" v-else-if="item.id==5">
                        <path d="M8.89917 7.97502C6.44558 7.85665 4.74008 8.73144 3.78266 10.5994C2.34654 13.4013 3.53344 17.9861 8.3245 17.9861C13.1156 17.9861 13.2542 13.3565 13.2542 12.8715C13.2542 12.5481 13.2542 10.7402 13.2542 7.44781C14.2789 8.09685 15.1429 8.48756 15.8462 8.61994C16.5494 8.75227 16.9965 8.81094 17.1874 8.7959V6.09769C16.5369 6.01927 15.9744 5.86977 15.4999 5.64927C14.788 5.31852 13.3765 4.40052 13.3765 3.0551C13.3775 3.06167 13.3775 2.71462 13.3765 2.01392H10.4107C10.4019 8.60394 10.4019 12.2231 10.4107 12.8715C10.424 13.844 9.6695 15.2044 8.13979 15.2044C6.61008 15.2044 5.85563 13.8451 5.85563 12.9684C5.85563 12.4316 6.04 11.6536 6.80213 11.0775C7.25408 10.7358 7.88138 10.5994 8.89917 10.5994C8.89917 10.2846 8.89917 9.40977 8.89917 7.97502Z" fill="inherit" />
                    </svg>
                    <svg class="fill_svg" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#95A5C9" v-else-if="item.id==6">
                        <rect width="20" height="20" fill="white" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3668 9.69065L10.3092 3.63307V1L11.3165 2.00727L17.9927 8.6834L18.9999 9.69065H16.3668ZM3.63311 9.69065L9.69071 3.63307V1L8.68344 2.00727L2.00729 8.6834L1.00004 9.69065H3.63311ZM1 10.3092H3.63308L9.69071 16.3668V18.9999L8.68344 17.9926L2.00729 11.3165L1 10.3092ZM16.3669 10.3092H19L17.9927 11.3165L11.3165 17.9926L10.3092 18.9999V16.3668L16.3669 10.3092Z" fill="inherit" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.69075 4.72363L9.20998 5.2044L5.20433 9.21004L4.72363 9.69073L6.30348 9.69073L9.69075 6.30347V4.72363ZM9.69075 13.6964L6.30356 10.3093L4.72371 10.3093L5.20433 10.7899L9.20998 14.7955L9.69075 15.2763V13.6964ZM10.3093 15.2761V13.6962L13.6962 10.3093L15.2761 10.3093L14.7955 10.7899L10.7898 14.7955L10.3093 15.2761ZM10.3093 6.3037V4.72386L10.7898 5.2044L14.7955 9.21004L15.2762 9.69073L13.6963 9.69073L10.3093 6.3037Z" fill="inherit" />
                    </svg>
                    <span class="brand_title">{{item.nickname}}</span>
                </div>
            </div>
            <div class="project_type flexbox flexcenter">
                <div class="project_item" :class="{'active':queryInfo.type==5}" @click="seletType(5)">短视频</div>
                <div class="project_item" :class="{'active':queryInfo.type==6}" @click="seletType(6)" v-if="queryInfo.channel==1 || queryInfo.channel==2">直播</div>
            </div>
        </div>
        <div class="com_box project_list" style="margin-top:10px">
            <div class="project_head flexbox flexcenter flexbetween">
                <div class="tab_title">项目列表</div>
                <div class="flexbox flexcenter">
                    <el-tooltip content="任务列表" placement="top">
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;margin-right:10px" @click="openTask">
                            <path d="M9 10.5C9 9.94772 9.44772 9.5 10 9.5H22C22.5523 9.5 23 9.94772 23 10.5V24C23 24.5523 22.5523 25 22 25H10C9.44772 25 9 24.5523 9 24V10.5Z" stroke="#616C85" stroke-width="2" stroke-linecap="round" />
                            <path d="M12 8.5C12 7.94772 12.4477 7.5 13 7.5L19 7.5C19.5523 7.5 20 7.94772 20 8.5V10.5C20 11.0523 19.5523 11.5 19 11.5H13C12.4477 11.5 12 11.0523 12 10.5V8.5Z" fill="white" stroke="#616C85" stroke-width="2" stroke-linecap="round" />
                            <path d="M16 15V21M16 21L13.5 19M16 21L18.5 19" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </el-tooltip>
                    <el-input style="width:216px;margin-right:16px" clearable size="small" placeholder="品牌、产品、项目人员" @change="getDataList(1)" suffix-icon="el-icon-search" v-model="queryInfo.query">
                    </el-input>
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addProject">添加项目</el-button>
                </div>
            </div>
            <el-table :data="tableData" max-height="700px" class="com_table">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="brand_name" label="品牌名称" width="140">
                </el-table-column>
                <el-table-column prop="product_name" label="产品名称">
                </el-table-column>
                <el-table-column prop="id" label="项目编号" width="140">
                </el-table-column>
                <el-table-column prop="project_profit" label="项目盈利" width="180">
                </el-table-column>
                <el-table-column prop="product_num" label="项目人员" width="120" align="center">
                    <template slot-scope="scope">
                        <div class="brand_num" @click="viewMember(scope.row.id)">{{scope.row.member}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="product_num" label="项目状态" width="120" align="center">
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.status" :active-value="1" :inactive-value="0" @change="switchStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="product_num" label="操作" width="250">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="editProject(scope.row.id)">编辑</el-link>
                        <el-link type="primary" :underline="false" @click="exportData(scope.row)" style="margin-left:10px" v-if="queryInfo.channel==1">导出项目数据分析报表</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { channelList } from "../../assets/js/scheduling";
import ViewMember from "./ViewMember";
import ExportDate from "./ExportDate";
import ExportTask from "./ExportTask";
import SelectBrand from "./SelectBrand";
export default {
    components: {
        ViewMember,
        ExportDate,
        ExportTask,
        SelectBrand
    },
    name: "",
    data() {
        return {
            loading: false,
            currActive: 1,
            queryInfo: {
                channel: 1,
                type: 5,
                page: 1,
                limit: 20,
                query: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
            channelList: [],
        };
    },
    created() {
        this.channelList = channelList;
        let queryData = JSON.parse(window.sessionStorage.getItem("proData"));
        this.queryInfo = queryData ? queryData : this.queryInfo;
        this.getDataList(1);
    },
    beforeDestroy() {},
    methods: {
        sesstionData() {
            window.sessionStorage.setItem(
                "proData",
                JSON.stringify(this.queryInfo)
            );
        },
        // 平台切换
        swichTab(index) {
            this.currActive = index;
            this.queryInfo.channel = index;
            if (index == 3 || index == 4 || index == 5) {
                this.queryInfo.type = 5;
            }
            this.getDataList(1);
        },

        // 场景筛选
        seletType(type) {
            this.queryInfo.type = type;
            this.getDataList(1);
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneSelect",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.sesstionData();
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 查看人员
        viewMember(id) {
            this.$refs.viewRef.dialogVisible = true;
            this.$refs.viewRef.getMemberList(id);
        },

        // 添加项目
        addProject() {
            let obj = {
                channel:this.queryInfo.channel,
                type:this.queryInfo.type,
            }
            this.$refs.select_ref.getData(obj)
            // this.$router.push({
            //     path: "/addproject",
            //     query: {
            //         channel: this.queryInfo.channel,
            //         type: this.queryInfo.type,
            //     },
            // });
        },

        // 编辑项目
        editProject(id) {
            this.$router.push({
                path: "/editproject",
                query: {
                    channel: this.queryInfo.channel,
                    type: this.queryInfo.type,
                    sid: id,
                },
            });
        },

        // 数据导出
        exportData(row) {
            this.$refs.ex_ref.getData(row);
        },

        // 任务列表
        openTask() {
            this.$refs.task_ref.getData();
        },

        switchStatus(row) {
            let text = row.status == 1 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}项目`, `${text}项目`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.status == 1 ? 0 : 1;
                    const { data: res } = await this.$http.post(
                        "adminapi/project/sceneStatus",
                        {
                            sid: row.id,
                            status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
};
</script>


<style scoped>
.over_one {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hover_box {
    padding: 4px;
}
.hover_title {
    font-size: 14px;
    color: #b4b7bd;
    line-height: 22px;
}
.hover_circle {
    width: 4px;
    height: 4px;
    background: #17233d;
    border-radius: 50%;
    margin-right: 10px;
}
.hover_item {
    font-size: 14px;
    color: #17233d;
    line-height: 22px;
    height: 22px;
    margin-top: 8px;
}
.company_item {
    height: 35px;
    line-height: 35px;
    width: 78px;
    border: 1px solid #ebebeb;
    border-bottom: 0;
    text-align: center;
    font-size: 16px;
    color: #616c85;
    background-color: #f8f8f9;
    border-radius: 6px 6px 0px 0px;
    margin-right: 12px;
    cursor: pointer;
}
.company_item.active {
    background-color: #fff;
    border-color: #fff;
    color: #4475ff;
}
.plam_box {
    border-top-left-radius: 0;
}
.brand_head {
    height: 55px;
    border-bottom: 1px solid #ebebeb;
}
.brand_item {
    padding: 0 20px;
    position: relative;
    cursor: pointer;
    height: 55px;
}
.brand_title {
    font-size: 16px;
    color: #616c85;
    margin-left: 8px;
}
.brand_item::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #4475ff;
    bottom: 0;
    transform: scaleX(0);
    transition: all 0.3s;
}
.brand_item.active::after {
    transform: scaleX(1);
}
.brand_item.active .brand_title {
    color: #4475ff;
}
.brand_item.active .fill_svg {
    fill: #4475ff;
}
.brand_item.active .stroke_svg {
    stroke: #4475ff;
}
.project_type {
    height: 56px;
}
.project_item {
    font-size: 14px;
    line-height: 16px;
    color: #616c85;
    padding: 0 20px;
    cursor: pointer;
    position: relative;
    border-right: 1px solid #f1f2f3;
}

.project_item:last-child {
    border-right: 0;
}

.project_item:hover,
.project_item.active {
    color: #4475ff;
}
.project_list {
    padding: 0 20px;
}
.project_head {
    height: 72px;
}
.brand_num {
    width: 64px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #f6f8ff;
    font-size: 14px;
    color: #616c85;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 auto;
}
.brand_num:hover {
    background: #f6f7fb;
}
</style>

